<template>
  <div class="app-main-container">
    <div class="app-main-title">奖品列表
      <div class="goback" @click="$router.go(-1)">
        <i class="el-icon-refresh-left" /> 返回上一页
      </div>
    </div>
    <div class="doumee-filter">
      <el-button v-preventReClick type="primary" @click="addActivty">新增</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" label="奖品名称" min-width="200" prop="prizeName" show-overflow-tooltip />
      <el-table-column
        align="center"
        label="奖品图片"
        min-width="100"
        prop="poster"
      >
        <template slot-scope="scope">
          <el-image
            fit="contain"
            :src="scope.row.showPic"
            :preview-src-list="[scope.row.showPic]"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="奖品类型"
        show-overflow-tooltip
        min-width="120"
      >
        <template slot-scope="{ row }">
          {{ acTypeToStr(row.acType) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="奖品总数量"
        min-width="110"
        show-overflow-tooltip
        prop="totalNum"
      >
        <template slot-scope="{row}">
          {{ row.totalNum==0 ? '不限量' : row.totalNum }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="单次中奖奖品数量"
        min-width="130"
        show-overflow-tooltip
        prop="prizeNum"
      />
      <el-table-column
        align="center"
        label="已中奖数量"
        min-width="130"
        show-overflow-tooltip
        prop="currentNum"
      >
        <template slot-scope="{row}">
          {{ row.totalNum==0?'-':row.currentNum }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="中奖概率"
        min-width="120"
        show-overflow-tooltip
        prop="ratio"
      />
      <el-table-column label="操作" min-width="140" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <!-- v-if="meta.indexOf('UpdateLuckdrawPrize') > -1" -->
            <el-button v-preventReClick type="text" @click="toEdit(scope.row.id)">编辑</el-button>
            <!-- v-if="meta.indexOf('DeletedLuckdrawPrize') > -1" -->
            <el-button
              v-preventReClick
              class="secondColor"
              type="text"
              @click="activityRemove(scope.row.id)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <AddPrize ref="addPrize" />
  </div>
</template>

<script>
import {
  getLuckdrawPrizeList,
  deletedLuckdrawPrize,
  getTypeConfigList
} from '@/api'
import { parseTime } from '@/utils/index'
import AddPrize from '@/components/addPrize'
export default {
  name: 'LuckdrawPrizeList',
  components: {
    AddPrize
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      data: [],
      list: [],
      totalCount: 0,
      listLoading: false,
      activityTimeEdit: true,
      showMotifyTime: false,
      prizeType: [],
      pagination: {
        page: 1,
        rows: 10
      },
      statusList: [
        { value: '0', label: '关闭' },
        { value: '1', label: '开启' }
      ],
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      }
    }
  },
  provide() {
    return {
      prizeType: () => this.prizeType
    }
  },
  created() {
    this.getList(1)
    getTypeConfigList({ param: { state: 1 }})
      .then(res => {
        this.prizeType = res.recordList
      })
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    acTypeToStr(id) {
      const temp = this.prizeType.find((item) => item.id === id)
      return temp ? temp.name : '-'
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    /**
     * @获取奖品列表
     */
    getList(page) {
      this.listLoading = true
      const { pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      if (pagination.page === 1) {
        pagination.firstQueryTime = parseTime(new Date())
      }
      getLuckdrawPrizeList({ pagination, param: { id: this.$route.query.id }})
        .then(res => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.totalCount = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
          this.$refs.table.doLayout()
        }).catch(() => {
          this.listLoading = false
        })
    },
    /**
     * @新增活动
     */
    addActivty() {
      this.$refs.addPrize.open(this.$route.query.id)
    },
    // 编辑
    toEdit(id) {
      this.$refs.addPrize.open(this.$route.query.id, id)
    },
    /**
     * @删除活动
     * @param {活动id} id
     */
    activityRemove(id) {
      const that = this
      this.$confirm('此操作将删除奖品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          deletedLuckdrawPrize({ param: { id }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success('删除成功')
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    }
  }
}
</script>

